<template>
	<div style="height: 100%;" @click="cancelDel">
		<!-- A级成员 -->
		<div class="u-pl-20 u-pb-10 u-pt-10 bg-gray">
			<span class="u-pt-5">A级-优秀测评师</span>
			<span class="u-pl-5">
				<u-icon name="question-circle" top="1" size="30" @click="showTips('A')"></u-icon>
			</span>
		</div>
		<div :class="show_add_A?'u-pt-10 u-pb-10 member u-flex select-border':'u-pt-10 u-pb-10 member u-flex'">
			<div v-for="item in members_A" @click.stop="delMember_A(item)" class="user">
				<u-avatar :src="item.avatarUrl" mode="square" size="100"></u-avatar>
				<u-icon name="close-circle-fill" size="28" v-if="show_del_A"></u-icon>
				<text>{{item.PartnerName}}</text>
			</div>
			<div class="add u-ml-10" @click.stop="toSelectUsers_A"></div>
			<div class="reduce u-ml-20" @click.stop="showDel_A"></div>
		</div>
		<!-- B级成员 -->
		<div class="u-pl-20 u-pb-10 u-pt-10 bg-gray">
			<span class="u-pt-5">B级-良好测评师</span>
			<span class="u-pl-5">
				<u-icon name="question-circle" top="1" size="30" @click="showTips('B')"></u-icon>
			</span>
		</div>
		<div :class="show_add_B?'u-pt-10 u-pb-10 member u-flex select-border':'u-pt-10 u-pb-10 member u-flex'">
			<div v-for="item in members_B" @click.stop="delMember_B(item)" class="user">
				<u-avatar :src="item.avatarUrl" mode="square" size="100"></u-avatar>
				<u-icon name="close-circle-fill" size="28" v-if="show_del_B"></u-icon>
				<text>{{item.PartnerName}}</text>
			</div>
			<div class="add u-ml-10" @click.stop="toSelectUsers_B"></div>
			<div class="reduce u-ml-20" @click.stop="showDel_B"></div>
		</div>
		<!-- C级成员 -->
		<!-- <div class="u-pl-20 u-pb-10 u-pt-10 bg-gray">
			<span class="u-pt-5">C级成员</span>
		</div>
		<div :class="show_add_C?'u-pt-10 u-pb-10 member u-flex select-border':'u-pt-10 u-pb-10 member u-flex'">
			<div v-for="item in members_C" @click.stop="delMember_C(item)" class="user">
				<u-avatar :src="item.avatarUrl" mode="square" size="100"></u-avatar>
				<u-icon name="close-circle-fill" size="28" v-if="show_del_C"></u-icon>
				<text>{{item.MemberName}}</text>
			</div>
			<div class="add u-ml-10" @click.stop="toSelectUsers_C"></div>
			<div class="reduce u-ml-20" @click.stop="showDel_C"></div>
		</div> -->
		<!-- 已验收的成员列表 -->
		<div class="u-pl-20 u-pb-10 u-pt-10 bg-gray" style="display: flex;justify-content: space-between;">
			<span class="u-pt-5">C级-普通测评师（已验收）</span>
			<div class="u-pr-10" style="width: 50%;">
				<u-search placeholder="请输入关键字" v-model="keyword" :show-action="false" bg-color="#fff"
					@search="searchMembersData"></u-search>
			</div>
		</div>
		<div class="u-pt-10 u-pb-10 member u-flex">
			<div v-for="item in members" @click.stop="addMember(item)" class="user">
				<u-avatar :src="item.avatarUrl" mode="square" size="100"></u-avatar>
				<u-icon name="plus-square-fill" size="28" v-if="show_select"></u-icon>
				<text>{{item.PartnerName}}</text>
			</div>
		</div>

		<div class="u-pt-20 save-btn" v-if="ViewShare">
			<div style="margin-top: 40rpx">
				<u-button :custom-style="customStyle" @click="goToIndex">
					关闭
				</u-button>
			</div>
		</div>

		<div class="u-pt-20 save-btn" v-else>
			<u-button :custom-style="customStyle" @click="userRatingShow">
				确定评级
			</u-button>
			<div style="margin-top: 40rpx">
				<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route"
					:style="shareData.style" :type="shareData.type" :posterData="shareData.posterData"></ShareBtn>
			</div>
		</div>

		<!-- 点击确定评级提示 -->
		<u-modal ref="uModal" title="温馨提示" v-model="UserRating_Show" show-cancel-button confirm-text="确认"
			cancel-text="返回" @confirm="userRating" confirm-color="#e55e97">
			<div class="u-p-20 u-text-center">
				<p>{{UserRating_Show_Content}}</p>
			</div>
		</u-modal>

		<!-- 点击问号弹出提示窗 -->
		<u-modal v-model="Tips_Show" :content="TipsContent" confirm-color="#e55e97"></u-modal>

	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
	export default {
		mixins: [shareMixins],
		data() {
			return {
				show_select: false,
				members: [],
				UserList: [],
				show_add_A: false,
				show_del_A: false,
				members_A: [],
				show_add_B: false,
				show_del_B: false,
				members_B: [],
				// show_add_C: false,
				// show_del_C: false,
				// members_C: [],
				docUnid: '',
				UserRating_Show: false,
				UserRating_Show_Content: '',
				LevelANum: 0,
				LevelBNum: 0,
				LevelCNum: 0,
				Tips_Show: false,
				TipsContent: '',
				TipsA: '点击“➕”即可在已验收测评师中评选A级测评师，点击“➖”即可从中移除A级测评师。',
				TipsB: '点击“➕”即可在已验收测评师中评选B级测评师，点击“➖”即可从中移除B级测评师。',
				ViewShare: false, // 是否通过分享进来的，是：true
				shareData: {
					docUnid: '',
					url: '',
					route: '',
					style: 0,
					type: 2,
					posterData: {
						imageURL: '', // 商品主图URL地址
						productName: '', // 商品名称
						productPrice: '', // 商品价格
						invitemsg: '邀请参与测评',// 邀请内容。如邀请参与测评，可不传。默认邀请
						type: 'zshb'
					},
					imageUrl: ''
				},
				customStyle: {
					background: '#e55e97 !important',
					color: '#fff !important',
					border: 'none !important'
				}
			};
		},

		onLoad(options) {

			if (this.isNotNull(options.docUnid)) {
				this.docUnid = options.docUnid
				this.initMembersData()

				// 是否为只读
				if (this.isNotNull(options.readonly) && options.readonly == '1') {
					this.ViewShare = true;
				}
				
				// 分享组件数据初始化
				this.shareData.docUnid = this.docUnid
				this.shareData.url = '/pages_private_scene2/ProductPromote/UserRating?docUnid='+this.docUnid+'&readonly=1',
				this.shareData.route = this.getCurrentPageUrl(this);
				
			} else {
				this.goBack()
			}
		},

		mounted() {

		},

		methods: {

			/**
			 * 初始化数据
			 */
			async initMembersData() {
				let result = await this.$u.api.unifyRequest({
					appid: 'ProductPromote',
					wf_num: 'R_ProductPromote_BL017',
					docUnid: this.docUnid,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.members = result.data
					this.LevelANum = result.LevelANum
					this.LevelBNum = result.LevelBNum
					this.LevelCNum = result.LevelCNum
					
					// 分享组件【商品信息】初始化
					this.shareData.posterData.imageURL = result.obj.CommodityPicture;
					this.shareData.posterData.productName = result.obj.CommodityName;
					this.shareData.posterData.productPrice = result.obj.UnitPrice;
					this.shareData.imageUrl = result.obj.CommodityPicture;
				}
			},

			/**
			 * 确定评级
			 */
			async userRating() {
				let form_data = []
				if (this.members_A.length > 0) {
					for (let i in this.members_A) {
						this.members_A[i].EvaluatorLevel = "A"
						form_data.push(this.members_A[i])
					}
				}
				if (this.members_B.length > 0) {
					for (let i in this.members_B) {
						this.members_B[i].EvaluatorLevel = "B"
						form_data.push(this.members_B[i])
					}
				}
				let result = await this.$u.api.unifyRequest({
					appid: 'ProductPromote',
					wf_num: 'R_ProductPromote_BL018',
					MainDocUnid: this.docUnid,
					WF_formData: form_data,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.showMSG('success', result.msg)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages_private_scene2/ProductPromote/RatingLeaderboard?docUnid=' +
								this.docUnid
						})
					}, 1500)
				} else {
					this.showMSG('none', result.msg)
				}
			},

			/**
			 * 搜索成员
			 */
			async searchMembersData() {
				let result = await this.$u.api.unifyRequest({
					appid: 'CustomMade',
					wf_num: 'R_CustomMade_BL011',
					LabelNumber: this.form.LabelNumber,
					searchStr: this.keyword,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				this.members = result.data
			},

			/**
			 * 点击加号区域选中并且已验收成员可添加状态
			 */
			toSelectUsers_A() {
				this.show_select = true
				this.show_add_A = true
				this.show_add_B = false
				// this.show_add_C = false
				this.cancelDelSimple() //清除删除状态
			},

			toSelectUsers_B() {
				this.show_select = true
				this.show_add_A = false
				this.show_add_B = true
				// this.show_add_C = false
				this.cancelDelSimple() //清除删除状态
			},

			// toSelectUsers_C(){
			//  this.show_select = true
			//  this.show_add_A = false
			//  this.show_add_B = false
			//  this.show_add_C = true
			//  this.cancelDelSimple()//清除删除状态
			// },

			/**
			 * 点击减号头像变为可删除操作
			 */
			showDel_A() {
				this.show_del_A = true
				this.show_del_B = false
				this.cancelAdd()
				// this.show_del_C = false
			},

			showDel_B() {
				this.show_del_A = false
				this.show_del_B = true
				this.cancelAdd()
				// this.show_del_C = false
			},

			// showDel_C(){
			// 	this.show_del_A = false
			// 	this.show_del_B = false
			// 	this.show_del_C = true
			// },

			/**
			 * 清除新增选中状态
			 */
			cancelAdd() {
				this.show_add_A = false
				this.show_add_B = false
				// this.show_add_C = false
				this.show_select = false
			},

			/**
			 * 点击空白处将可删除的头像样式恢复原样
			 */
			cancelDel() {
				this.show_del_A = false
				this.show_del_B = false
				// this.show_del_C = false
				this.cancelAdd()
			},

			cancelDelSimple() {
				this.show_del_A = false
				this.show_del_B = false
				// this.show_del_C = false
			},

			/**
			 * 确认删除成员
			 */
			delMember_A(item) {
				if (!this.show_del_A) {
					//如果不是删除成员，则跳转到该用户的不可编辑的提交成果页
					this.$u.route('/pages_private_scene2/ProductPromote/SubmitResults?docUnid=' + item.WF_OrUnid +
						'&ReadOnly=1&userId=' + item.Partnerid)
					return;
				}
				var length = this.members_A.length;
				for (var i = 0; i < length; i++) {
					if (this.members_A[i].WF_OrUnid == item.WF_OrUnid) {
						if (i == 0) {
							this.members_A.shift(); //删除并返回数组的第一个元素
						} else if (i == length - 1) {
							this.members_A.pop(); //删除并返回数组的最后一个元素
						} else {
							this.members_A.splice(i, 1); //删除下标为i的元素
						}
						this.members.push(item)
					}
				}
			},

			delMember_B(item) {
				if (!this.show_del_B) {
					//如果不是删除成员，则跳转到该用户的不可编辑的提交成果页
					this.$u.route('/pages_private_scene2/ProductPromote/SubmitResults?docUnid=' + item.WF_OrUnid +
						'&ReadOnly=1&userId=' + item.Partnerid)
					return;
				}
				var length = this.members_B.length;
				for (var i = 0; i < length; i++) {
					if (this.members_B[i].WF_OrUnid == item.WF_OrUnid) {
						if (i == 0) {
							this.members_B.shift(); //删除并返回数组的第一个元素
						} else if (i == length - 1) {
							this.members_B.pop(); //删除并返回数组的最后一个元素
						} else {
							this.members_B.splice(i, 1); //删除下标为i的元素
						}
						this.members.push(item)
					}
				}
			},

			// delMember_C(item) {
			//  if(!this.show_del_C){
			//  	  return
			//  }
			//  var length = this.members_C.length;
			//  for (var i = 0; i < length; i++) {
			// 	if (this.members_C[i].WF_OrUnid == item.WF_OrUnid) {
			// 		if (i == 0) {
			// 			this.members_C.shift(); //删除并返回数组的第一个元素
			// 		}
			// 		else if (i == length - 1) {
			// 			this.members_C.pop();  //删除并返回数组的最后一个元素
			// 		}
			// 		else {
			// 			this.members_C.splice(i, 1); //删除下标为i的元素
			// 		}
			// 		this.members.push(item)
			// 	}
			//  }
			// },

			/**
			 * 添加用户到指定的等级列表中
			 */
			addMember(item) {
				if (this.show_add_A && this.show_select) {
					if (this.members_A.length < this.LevelANum) {
						this.members_A.push(item)
						this.delMember(item)
					} else {
						this.showMSG("none", "A级成员已达上限")
					}
				} else if (this.show_add_B && this.show_select) {
					if (this.members_B.length < this.LevelBNum) {
						this.members_B.push(item)
						this.delMember(item)
					} else {
						this.showMSG("none", "B级成员已达上限")
					}
				} else {
					//如果不是删除成员，则跳转到该用户的不可编辑的提交成果页
					this.$u.route('/pages_private_scene2/ProductPromote/SubmitResults?docUnid=' + item.WF_OrUnid +
						'&ReadOnly=1&userId=' + item.Partnerid)
					return;
				}
				//else if(this.show_add_C && this.show_select){
				//  this.members_C.push(item)
				//  this.delMember(item)
				// }
			},

			delMember(item) {
				var length = this.members.length;
				for (var i = 0; i < length; i++) {
					if (this.members[i].WF_OrUnid == item.WF_OrUnid) {
						if (i == 0) {
							this.members.shift(); //删除并返回数组的第一个元素
						} else if (i == length - 1) {
							this.members.pop(); //删除并返回数组的最后一个元素
						} else {
							this.members.splice(i, 1); //删除下标为i的元素
						}
					}
				}
			},

			/**
			 * 点击确定评级弹窗
			 */
			userRatingShow() {
				let total = this.members_A.length + this.members_B.length + this.members.length
				this.UserRating_Show_Content = '当前共有' + total + '名测评师参与测评任务，其中A级测评师' + this.members_A.length + '人，B级测评师' +
					this.members_B.length + '人，C级测评师' + this.members.length + '人，请确认结果。'
				this.UserRating_Show = true
			},

			/**
			 * 点击问号弹出提示
			 */
			showTips(type) {
				if (type == 'A') {
					this.TipsContent = this.TipsA
					this.Tips_Show = true
				} else if (type == 'B') {
					this.TipsContent = this.TipsB
					this.Tips_Show = true
				}
			},

			/**
			 * 前往首页
			 */
			goToIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},

		},
	};
</script>

<style scoped>
	.member {
		background-color: white;
		flex-wrap: wrap;
		padding-left: 25rpx;
	}

	.del-btn {
		width: 94%;
		padding-left: 5%;
	}

	.save-btn {
		width: 94%;
		padding-left: 5%;
	}

	.add {
		width: 100rpx;
		height: 100rpx;
		border: 1px dashed #BCBCBC;
		transition: color .25s;
		position: relative;
		color: #BCBCBC;
	}

	.add::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 55rpx;
		margin-left: -28rpx;
		margin-top: -5rpx;
		border-top: 2px solid;
	}

	.add::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 50rpx;
		margin-left: -5rpx;
		margin-top: -28rpx;
		border-left: 2px solid;
	}

	.reduce {
		width: 100rpx;
		height: 100rpx;
		border: 1px dashed #BCBCBC;
		transition: color .25s;
		position: relative;
		color: #BCBCBC;
	}

	.reduce::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 55rpx;
		margin-left: -28rpx;
		margin-top: -5rpx;
		border-top: 2px solid;
	}

	.user {
		padding: 20rpx;
		width: 140rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bg-gray {
		background-color: #ededed;
	}

	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}

	.select-border {
		border: 1px dashed #f1b13deb;
	}
</style>
